<!--
 * @Description:商品列表根据分类显示
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-5-16 16:10:00
 * @LastEditors: Yejing
 * @LastEditTime: 2023-06-10 17:30:02
-->
<template>
	<view class="goods-for-classify-container">
		<c-layout>
			<c-navigation-bar slot="head" :bgColor="true" :title="this.currentData.index != 8?currentData.name:'All'">

			</c-navigation-bar>
			<view class="tabs-group">

				<view :class="['tab',current1 == 'Sales' ? 'active-tab' : '']" style="display: flex;align-items: center;">

					<view class="" @click="selectGoods('Sales')">
						{{$t('storeManagement.Sales')}}
					</view>

					<view class="" style="margin-left: 8rpx;">
						<u-icon name="arrow-up" :color="sort==5?'#000':'#ccc'" size="20" style="display: block;"
							@click="selectGoods('Sales',5)"></u-icon>
						<u-icon name="arrow-down" :color="sort==2?'#000':'#ccc'" size="20" style="display: block;"
							@click="selectGoods('Sales',2)"></u-icon>
					</view>

				</view>

				<view :class="['tab',current1 == 'price' ? 'active-tab' : '']" style="display: flex;align-items: center;">

					<view class="" @click="selectGoods('price')">
						{{$t('storeManagement.price')}}
					</view>

					<view class="" style="margin-left: 8rpx;">
						<u-icon name="arrow-up" :color="sort==7?'#000':'#ccc'" size="20" style="display: block;"
							@click="selectGoods('price',7)"></u-icon>
						<u-icon name="arrow-down" :color="sort==4?'#000':'#ccc'" size="20" style="display: block;"
							@click="selectGoods('price',4)"></u-icon>
					</view>

				</view>
			</view>

			<scroll-view scroll-y style="height: 92%; width: 100%" @scrolltolower="onreachBottom1">
				<view class="container-box">
					<view class="">
						<productCard type="center" :details="item" v-for="(item,index) in goodList" @click="goProductDetail(item)" :key="index">
						</productCard>
					</view>
				</view>
			</scroll-view>
		</c-layout>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 1,
				// 当前分类
				currentData: {
					name: 'All'
				},
				//
				goodList: [

				],
				show: false,
				sort: '',
				current1: '',
			};
		},
		onLoad(data) {
			this.currentData = {
				...data
			};
			this.getAllGoods();
			console.log(this.currentData, 'onload');
		},
		methods: {
			goProductDetail(item) {
				uni.navigateTo({
					url: '/pages/productDetails/productDetails?productId=' + item.id
				});
			},
			selectGoods(type, sort) {
				this.goodList = []
				this.current1 = type
				let paging = {
					size: 20,
					current: 1,
					cateId: this.currentData.id,

				}
				switch (this.current1) {

					case 'Sales':
						this.sort = (sort !== 5&&sort !== 2 )? 5 :sort
						paging.sortType = this.sort

						break;

					case 'price':
						this.sort =  (sort!== 7&&sort !== 4)? 7 :sort
						paging.sortType = this.sort

						break;

					default:
						break;
				}
				this.$u.post('/app/shopGoodsInfo/useraLLpage', paging).then((d) => {
					// console.log(d);
					this.goodList = d.data.records;

				})

			},
			getAllGoods(type = 1) {
				let data = {};
				if (this.currentData.index != 8) {
					data = {
						size: 20,
						current: this.current,
						cateId: this.currentData.id,
						sortType: type
					};
				} else {
					data = {
						size: 20,
						current: this.current
					};
				}

				this.$u.post('/app/shopGoodsInfo/useraLLpage', data).then((d) => {

					const nextDataList = d.data.records; // 假设接口返回数据格式为 { data: [...] }
					if (nextDataList.length > 0) {
						this.goodList = this.goodList.concat(nextDataList);
						this.current++;
					} else {
						uni.showToast({
							title: 'no more',
							icon: 'none'
						});
					}
				});
			},
			//
			goFilterMenu() {
				this.show = !this.show;
			},

			//触底加载
			onreachBottom1() {
				console.log('reresh');
				this.getAllGoods(this.sort)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.goods-for-classify-container {
		font-family: SFUIDisplay-Regular-Regular, SFUIDisplay-Regular;
		.slot-icon {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.tabs-group {
			display: flex;
			position: relative;
			width: 100%;
			justify-content: space-around;

			.tab {
				color: #999CAD;
				font-size: 28rpx;
				margin-right: 40rpx;
				height: 40rpx;
				text-align: center;
			}

			.active-tab {
				color: #000;
				font-weight: bold;
			}

			.tab-active-line {
				position: absolute;
				bottom: 0;
				width: 16rpx;
				height: 6rpx;
				background: #FFFFFF;
				border-radius: 3rpx;
				opacity: 1;
				transform: translate(20rpx, -100%);
				transition-duration: 0.5s;
			}

			.tab-active-new {
				transform: translate(50px, -100%);
			}
		}

		.choose-box {
			position: absolute;
			width: 240rpx;
			box-shadow: 0px 0px 15px #d5d5d5;
			border-radius: 10rpx;
			z-index: 999;
			top: 120rpx;
			right: 5rpx;
			background-color: #ffffff;

			&::before {
				content: '';
				width: 0;
				height: 0;
				border-bottom: 20rpx solid #f8f8f8;
				border-left: 20rpx solid transparent;
				// border-left: none;
				position: absolute;
				top: -20rpx;
				right: 40rpx;
				box-shadow: 0px 0px 15px #d5d5d5;
			}

			view {
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;

				&:nth-last-child() {
					border-bottom: 1px solid rgba(0, 0, 0, 0.3);
				}
			}
		}

		.container-box {
			>view {
				display: flex;
				flex-wrap: wrap;

				/deep/ .product-card-container {
					// width: 320rpx;
					width: calc((100% / 2) - 16rpx);

					margin-right: 30rpx;
					margin-bottom: 52rpx;

					>view:nth-child(2) {
						margin-top: 10rpx;
					}

					&:nth-child(2n) {
						margin-right: 0rpx;
					}

					.intro {
						padding: 0;
					}
				}
			}
		}
	}
</style>